<template>
  <div id="div-1">
    <a-typography-paragraph id="div-2" class="relative">
      <a-image :src="indexImage" width="100%" id="banner" :preview="false"></a-image>
      <a-typography-paragraph class="absolute bottom-0 left-8 flex !m-0 gap-1 w-full h-10 items-center" id="div-2-2">
        <a-typography-paragraph :key="index" v-for="(item, index) in 5" :id="`div-2-2-atp${index}`" class="inline-block !m-0 h-2 w-2 rounded-full" :class="index == 0 ? 'bg-red-800': 'bg-gray-400'"></a-typography-paragraph>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-typography-paragraph id="div-4">
      <a-tabs :activeKey="activeKey" size="large" id="tabs" >
        <a-tab-pane id="tab-1" key="1" tab="即将结束">Content of Tab Pane 1</a-tab-pane>
        <a-tab-pane id="tab-2" key="2" tab="最新上架">
          <a-list :grid="{ gutter: 0, column: 4 }" :data-source="list" id="list">
            <template #renderItem="{ item , index}">
              <a-list-item :id="`list-${index}`">
                <a-card :bordered="false" :id="`card-${index}`">
                  <a-typography-paragraph class="absolute right-0" :id="`card-div-1-${index}`">
                    <a-image :preview="false" :src="listImage" :id="`card-img-${index}`"></a-image>
                  </a-typography-paragraph>
                  <a-typography-paragraph class="flex justify-center mt-10 h-64" :id="`card-div-2-${index}`">
                    <a-image class="max-h-56" :src="item.image" :preview="false" :id="`card-div-2-img-${index}`"></a-image>
                  </a-typography-paragraph>
                  <a-typography-paragraph strong class="mx-4 text-blue-800" :id="`card-atp-1-${index}`">
                    <a-typography-link href="#" :id="`card-atl-1-${index}`">{{ item.name }}</a-typography-link>
                  </a-typography-paragraph>
                  <a-typography-paragraph class="mx-4 flex !my-0" :id="`card-div-3-${index}`">
                    <a-typography-text strong class="text-xl flex-1" :id="`card-att-1-${index}`">¥ {{item.priceRmb}}</a-typography-text>
                    <a-typography-paragraph class="flex-1 text-end !m-0" :id="`card-div-3-div-${index}`">
                      <PoundCircleOutlined class="text-gray-400" :id="`card-icon-${index}`"/> 
                      <a-typography-link :id="`card-atl-2-${index}`" href="#" class="text-blue-800">{{item.priceNum + '次出价'}}</a-typography-link>
                    </a-typography-paragraph>
                  </a-typography-paragraph>
                  <a-typography-paragraph class="mx-4 flex !my-0" :id="`card-div-4-${index}`">
                    <a-typography-text class="text-base flex-1" :id="`card-div-4-att1-${index}`">约$ {{item.priceDollar}}</a-typography-text>
                    <a-typography-text :span="12" :id="`card-div-4-att2-${index}`" class="text-gray-400 text-end">运费：¥ {{item.shippingFee}}</a-typography-text>
                  </a-typography-paragraph>
                  <a-typography-paragraph class="mx-4 text-blue-800 !my-0" :id="`card-div-5${index}`">
                    <a-typography-link :id="`card-div-5-atl1-${index}`" href="#">{{ item.customerService }}</a-typography-link>
                    <a-typography-link :id="`card-div-5-atl2-${index}`" href="#">{{  '(' + item.numberOfReplies + ')'}}</a-typography-link>
                    <a-typography-link :id="`card-div-5-atl3-${index}`" href="#"><MessageOutlined  :id="`card-div-5-icon${index}`"/></a-typography-link>
                  </a-typography-paragraph>
                  <a-typography-paragraph :id="`card-atp-5-${index}`" class="mx-4 text-sm text-end ">{{item.endTime}}</a-typography-paragraph>
                </a-card>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
        <a-tab-pane id="tab-3" key="3" tab="一口价最高">Content of Tab Pane 3</a-tab-pane>
        <a-tab-pane id="tab-4" key="4" tab="竞价目前最高">Content of Tab Pane 4</a-tab-pane>
      </a-tabs>
    </a-typography-paragraph>
  </div>
</template>
<script setup>
const activeKey = ref("2");
const indexImage = "https://picsum.photos/id/10/1080/300";
const listImage = 'https://picsum.photos/id/9/26/34';
const list = [
  {
    image: 'https://picsum.photos/id/0/148/196',
    name: '2020-21 panini Crown Royale Anthony Edwards 皇冠 森林狼 安东尼',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '18',
    customerService: '阿宝矿力',
    numberOfReplies: '5800',
    endTime: '3天5小时后结束'
  },
  {
    image: 'https://picsum.photos/id/1/148/196',
    name: '2020-21 Panini Immaculate TraeYoung爱咪咪 老鹰 特雷杨 pa 球衣 GU',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '18',
    customerService: '阿宝矿力',
    numberOfReplies: '5800',
    endTime: '3天5小时后结束'
  },
  {
    image: 'https://picsum.photos/id/2/148/196',
    name: '2023-24 Panini Noir AmareStoudemire 阿玛雷 斯塔德迈尔 诺尔签',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '18',
    customerService: '阿宝矿力',
    numberOfReplies: '5800',
    endTime: '3天5小时后结束'
  },
  {
    image: 'https://picsum.photos/id/3/148/196',
    name: '2020-21 Panini Optic Devin VassellRC马刺，瓦赛尔 新秀base',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '15',
    customerService: '阿宝矿力',
    numberOfReplies: '5800',
    endTime: '3天4小时后结束'
  },
  {
    image: 'https://picsum.photos/id/4/148/196',
    name: '2023-24 Panini Prizm Jose Alvarado鹈鹕 老6约瑟 阿尔瓦拉多pz绿',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '15',
    customerService: '新手耍卡36',
    numberOfReplies: '90',
    endTime: '23小时58分38秒后结束'
  },
  
  {
    image: 'https://picsum.photos/id/5/148/196',
    name: '2023-24 Panini Prizm JonathanKuminga 勇士 乔纳德 库明加 prizm 绿',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '15',
    customerService: '新手耍卡36',
    numberOfReplies: '90',
    endTime: '23小时58分34秒后结束'
  },
  
  {
    image: 'https://picsum.photos/id/6/148/196',
    name: '2023-24 Panini Prizm Kelly Oubre Jr.76人 凯利 乌布雷 prizm 绿',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '15',
    customerService: '新手耍卡36',
    numberOfReplies: '90',
    endTime: '23小时58分31秒后结束'
  },
  {
    image: 'https://picsum.photos/id/7/148/196',
    name: '2023-24 Panini Prizm Josh Hart Br斯约什 哈特 绿折',
    priceRmb: '1.00',
    priceDollar: '0.14',
    priceNum: '0',
    shippingFee: '15',
    customerService: '新手耍卡36',
    numberOfReplies: '90',
    endTime: '23小时58分27秒后结束'
  },
]

</script>
<style scope>
</style>
